<template>
  <div v-loading="loading">
    <rightArea right-title="消息提醒" :areaHeight="height">
      <template slot="content">
        <div :style="cWrapperHeight">
          <el-scrollbar style="height:100%" v-if="data.length>0">
            <Item :data="data" />
          </el-scrollbar>
        </div>
      </template>
    </rightArea>
  </div>
</template>

<script>
import rightArea from "@/views/index/Index/common/rightArea";
import Item from "@/views/index/Index/common/Item";
import { axiosGetUserItemCount } from "@/api/home";
let map = {
  notify0: {
    name: "知会待办",
    topContent: 0
  },
  notify1: {
    name: "知会已办",
    topContent: 0
  },
  workflow0: {
    name: "流程待办",
    topContent: 0
  },
  workflow1: {
    name: "流程已办",
    topContent: 0
  }
};
export default {
  components: {
    rightArea,
    Item
  },
  props: {
    height: {
      type: [String, Number],
      default: 240
    }
  },
  computed: {
    cWrapperHeight () {
      return {
        height: this.height - 40 + "px"
      };
    }
  },
  data () {
    return {
      map,
      data: [],
      loading: true
    };
  },
  created () {
    this.getNoticeData();
  },
  methods: {
    getNoticeData () {
      axiosGetUserItemCount().then(res => {
        if (res.status === 200 && res.data.code === 0) {
          this.data = res.data.data.map(v => {
            v.topContent = v.value;
            return v;
          });
        }
        this.loading = false;
      })["catch"]((err) => {
        console.log(err);
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>